<template>
	<!-- 质保金退还详情 -->
	<nt-container>
		<view class="Wdetail">
			<view class="Wdetail-header">
				<block v-for="(item,index) in computeList" :key="index">
					<u-cell :title="item.title" :url="item.url" :isLink="item.isLink">
						<text :style="[item.style]" slot="value">{{item.value}}</text>
					</u-cell>
				</block>
			</view>
			<view class="Wdetail-container">
				<!--退还进度  -->
				<view class="Wdetail-container-progress" v-if="steps.length>0">
					<view class="Wdetail-container-progress-title">
						退还进度：
					</view>
					<u-steps current="100" direction="column" activeColor="#333333">
						<u-steps-item v-for="(item,index) in  steps" :key="index" style="height:100px"
							:title="item.label" :desc="item.date"></u-steps-item>
					</u-steps>
				</view>
				<!--质保金退还须知  -->
				<view class="Wdetail-container-progress">
					<view class="Wdetail-container-progress-title">
						质保金退还须知：
					</view>
					<view class="content">
						1、电脑办公设备维修工程师自解约成功90天退还保证金；
						2、根据工程师合作协议，发生工程师合作协议约定的扣款项目的，将依据条款规则在质保金退还前扣取相应金额，余额到期后退还；
						3、受账期影响，质保金退还实际到账时间可能有5~10个工作日延迟。
					</view>
				</view>
			</view>
		</view>
	</nt-container>
</template>

<script>
	import {
		publicConfig
	} from '@/api'
	export default {
		async created() {
			const params = {
				countApi: 'getRetentionCount',
				listApi: 'getRetentionList',
				title: '质保金'
			}
			this.headerList[1].url =
				`/subpackage/member/pages/commission/recordDetails?params=${JSON.stringify(params ?? '')}`
			await this.getCount()
			await this.getRetentionStatus()
		},
		computed: {
			computeList() {
				if (this.steps.length != 0) {
					this.headerList.pop()
				}
				return this.headerList
			}
		},
		data() {
			return {
				steps: [],
				headerList: [{
						title: '质保金退款总额',
						value: '￥0.00',
						style: {
							fontSize: '38rpx',
							color: '#333333',
							fontWeight: 'bold'
						}
					},

					{
						title: '质保金明细',
						value: '点击查看',
						isLink: true,
						style: {
							fontSize: '33rpx',
							color: '#FF7A00'
						}
					},

					{
						title: '退款方式',
						value: '预计退款至预留银行账户',
						style: {
							fontSize: '33rpx',
							color: '#CCCCCC'
						},
						url: '/subpackage/member/pages/warranty/applyPayout?applytype=2'
					},
				],
				pathUrl: '',
			}
		},
		methods: {
			async getRetentionStatus() {
				const {
					data,
					code
				} = await publicConfig('getRetentionStatus')
				if (code === 1) {
					this.steps = data
				}
			},
			async getCount() {
				const {
					data,
					code
				} = await publicConfig('getRetentionCount')
				if (code === 1) {
					this.headerList[0].value = '￥' + data.count1
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Wdetail {
		&-header {
			background: #fff;
		}

		&-container {
			margin: 40rpx;

			&-progress {
				padding: 40rpx 45rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				margin-bottom: 40rpx;

				&-title {
					font-size: 33rpx;
					color: #333333;
					margin-bottom: 20rpx
				}
			}
		}
	}

	/deep/.u-cell__body {
		padding: 40rpx 45rpx
	}

	/deep/.u-steps-item__line--column {
		width: 0 !important;
		border-left: 1px dashed #666;
		background-color: transparent !important;
	}

	/deep/.u-steps-item__wrapper__circle {
		background-color: #333333 !important;
	}

	/deep/.uicon-checkmark {
		color: #fff !important
	}

	/deep/ .u-steps-item {
		.u-steps-item__content--column {
			margin-bottom: 50rpx !important;
		}

		/deep/ .u-text {
			.u-text__value--content {
				font-size: 29rpx !important;
				color: #333333 !important;
			}
		}

		&:last-child {
			.u-steps-item__content--column {
				margin-bottom: 0 !important;
			}

			.u-text {
				.u-text__value--content {
					color: #FF7A00 !important;
				}
			}
		}

	}

	.content {
		font-size: 29rpx;
		color: #999999;
		white-space: pre-line;
		line-height: 50rpx;
	}
</style>